<template>
  <div class="welcome">
    <!-- 面包屑导航-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">树结构</el-breadcrumb-item>
      <el-breadcrumb-item>树结构{{count}}</el-breadcrumb-item>
      <el-breadcrumb-item>树结构{{this.$store.state.count}}</el-breadcrumb-item>
       <button type='button' @click='add'>dddd</button>
    </el-breadcrumb>
<p></p>
    <el-card>
      <!-- 树结构 EEEE  end-->
      <el-tree :data="treeData" :props="props" :load="loadNode" lazy node-key="cat_id">
        <span class="custom-tree-node" slot-scope="{ node }">
          <span>{{ node.label }}</span>
          <span>{{ node.cat_id }}</span>
          <span style="padding-left:10px;"> </span>
        </span>
      </el-tree>
      <!-- 树结构 EEEEend -->
      <button @click="getList">jiza</button>
    </el-card>
  </div>
</template>
<script>

export default {
  data() {
    return {
      queryinfo: {
        type: 1,
        pagenum: 1,
        pagesize: 10
      },
      treeData: [],
      props: {
        label: 'cat_name',
        children: 'cat_deleted',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {

     add(){
    
      this.$store.commit('addvuex')
    },
    //获取用户列表
    getList() {
      this.$http
        .get('categories', { params: { type: this.type } })
        .then(result => {
          if (result.data.meta.status != 200) return this.$message.err('获取信息失败')
          console.log(result)
          this.treeData = result.data.data
          //this.total = result.data.data.total
        })
        .catch(err => {
          console.log(err)
        })
    },
    //获取节点
    loadNode(node, resolve) {
      console.log(node)
      if (node.level === 0) {
        return resolve([{ cat_name: '平顶山' }])
       // this.getList()
      } else {
       // if (node.level > 1) return resolve([])
       this.type=2
       console.log(this.type)
        this.getList()
      }
    }
    /*  append(node, data) {
      console.log('append')
    },
    update(node, data) {
      console.log('update')
    },
    remove(node, data) {
      console.log('remove')
    }*/
 
 
 },
   computed:{
    count(){
      return this.$store.state.count;
    }
  },
  
  
  mounted() {
    //this.getList()
  }
}
</script>
<style lang="less" scoped></style>
